/* eslint-disable */
import React from 'react';
import { Accordion, List } from 'antd-mobile';

import { Tabs, Badge } from 'antd-mobile';
import { SearchBar } from 'antd-mobile';

import { Grid } from 'antd-mobile';

const tabTop = [
  { title: '事件大厅'},
  { title: '我的事项'}
];

const tabBottom = [
  { title: '全部' },
  { title: '待响应' },
  { title: '处理中' },
  { title: '已完成' },
  { title: '已超时' }
];

const gridData = Array.from(new Array(9)).map((_val, i) => ({
  icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
  text: `name${i}`,
}));

const TabExampleTop = () => (
  <div>
    <Tabs tabs={tabTop}
      initialPage={1}
      onChange={(tab, index) => { console.log('onChange', index, tab); }}
      onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
    >
      <div style={{height: '150px', backgroundColor: '#fff' }}>
        <Grid data={gridData} activeStyle={false} />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
        2nd
      </div>
    </Tabs>
  </div>
);

const TabExampleBottom = () => (
  <div>
    <Tabs tabs={tabBottom}
      initialPage={1}
      onChange={(tab, index) => { console.log('onChange', index, tab); }}
      onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
        <Accordion defaultActiveKey="0" className="my-accordion"
        // onChange={this.onChange}
        >
          <Accordion.Panel header="Title 1">
            <List className="my-list">
              <List.Item>content 1</List.Item>
              <List.Item>content 2</List.Item>
              <List.Item>content 3</List.Item>
            </List>
          </Accordion.Panel>
          <Accordion.Panel header="Title 2" className="pad">this is panel content2 or other</Accordion.Panel>
          <Accordion.Panel header="Title 3" className="pad">
            text text text text text text text text text text text text text text text
          </Accordion.Panel>
        </Accordion>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
        2nd
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
        3rd
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
        4th
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
        5th
      </div>
    </Tabs>
  </div>
);

export default class workStation extends React.Component {
  render() {
    return (
      <div >
        <TabExampleTop />
        <SearchBar
        value={'输入名称关键字搜索'}
        placeholder="Search"
        onSubmit={value => console.log(value, 'onSubmit')}
        onClear={value => console.log(value, 'onClear')}
        onFocus={() => console.log('onFocus')}
        onBlur={() => console.log('onBlur')}
        onCancel={() => console.log('onCancel')}
        showCancelButton
        cancelText={"筛选"}
        onChange={this.onChange}
      />
        <TabExampleBottom />
      </div>
    );
  }
}


